[class*='mode-draw'] {
    cursor: url('../image/cursor/cursor-draw.png') 9 9, crosshair;
}

[class*='mode-select'],
[class*='mode-browse'],
[class*='mode-drag'] {
    .line {
        cursor: url('../image/cursor/cursor-select-line.png'), pointer;
    }

    .polygon {
        cursor: url('../image/cursor/cursor-select-polygon.png'), pointer;
    }

    .point {
        cursor: url('../image/cursor/cursor-select-point.png'), pointer;
    }

    .vertex {
        cursor: url('../image/cursor/cursor-select-vertex.png'), pointer;
    }
}

#seditor {
    path {
        fill: none;
        pointer-events: auto;
    }

    &.nope,
    &.nope * {
        cursor: not-allowed;
    }

    .layer-points {
        @keyframes twinkling {
            0% {
                stroke-opacity: 0.4;
                stroke-width: 14;
            }

            50%,
            75% {
                stroke-opacity: 0.8;
                stroke-width: 16;
            }

            100% {
                stroke-opacity: 0.4;
                stroke-width: 14;
            }
        }
        .point-group.selected {
            .shadow {
                animation: twinkling 1.4s infinite cubic-bezier(0, 0, 0.49, 1.02);
            }
        }
        .point-group {
            .stroke {
                stroke: #444;
                stroke-width: 1;
                fill: #fff;
            }

            .shadow {
                stroke: #f6634f;
                stroke-width: 16;
                fill: none;
                stroke-opacity: 0;
            }
        }
        .point-group:hover {
            .shadow {
                stroke-opacity: 0.5 !important;
            }
        }
    }

    .layer-nodes {
        circle.shadow {
            stroke: transparent;
            stroke-width: 6;
            fill: #f6634f;
            fill-opacity: 0;
        }

        .node-group:hover {
            .shadow {
                fill: #f6634f;
                fill-opacity: 0.4;
            }
        }
        @keyframes circle-twinkling {
            0% {
                fill-opacity: 0.4;
            }

            50%,
            75% {
                fill-opacity: 0.8;
            }

            100% {
                fill-opacity: 0.4;
            }
        }
        .vertex.selected {
            .shadow {
                animation: circle-twinkling 1.4s infinite cubic-bezier(0, 0, 0.49, 1.02);
            }
        }
        .vertex {
            stroke: #666666;
            stroke-width: 1px;
            fill: #ffffff;
        }

        .vertex.cross {
            stroke: #666666;
            stroke-width: 1px;
            fill: #999;
        }

        .vertex._hidden {
            visibility: hidden;
        }
    }

    .layer-lines,
    .layer-polygons {
        @keyframes twinkling {
            0% {
                stroke-opacity: 0.4;
                stroke-width: 11;
                fill-opacity: 0.4;
            }

            50%,
            75% {
                stroke-opacity: 0.6;
                stroke-width: 16;
                fill-opacity: 0.8;
            }

            100% {
                stroke-opacity: 0.4;
                stroke-width: 11;
                fill-opacity: 0.4;
            }
        }

        .line-group,
        .polygon-group {
            .line {
                stroke: rgb(26, 254, 254);
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .polygon {
                stroke: #f56c6c;
                stroke-width: 2;
            }

            .line.shadow {
                stroke: rgb(26, 254, 254);
                stroke-width: 16px;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-opacity: 0;
            }

            .polygon.shadow {
                stroke: #f6634f;
                stroke-width: 16px;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-opacity: 0;
            }

            &:hover {
                .shadow {
                    stroke-opacity: 0.5;
                }
            }

            .fill {
                fill: rgba(255, 133, 122, 0.3);
                fill-rule: evenodd;
                stroke: none;
            }
        }

        .line-group.selected,
        .polygon-group.selected {
            .shadow {
                animation: twinkling 1.4s infinite cubic-bezier(0, 0, 0.49, 1.02);
            }
        }
    }

    .dashed-line {
        stroke-dasharray: 6, 6;
    }

    .dashed-line,
    .dashed-vertex {
        pointer-events: none;

        * {
            pointer-events: none;
        }
    }
}

#seditor.mode-drag .selected {
    pointer-events: none !important;

    * {
        pointer-events: none !important;
    }
}
#seditor.mode-select,
#seditor.mode-drag {
    .polygon-group.none-event .fill {
        pointer-events: none !important;
    }
}
#seditor[class*='mode-drag'],
#seditor[class*='mode-draw'] {
    .polygon-group .fill {
        pointer-events: none !important;
    }
}

.seditor_draw_tip {
    position: absolute;
    z-index: 401;
    padding: 6px 12px;
    margin-left: 20px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
}

.seditor_edit_menu {
    position: absolute;
    top: 100px;
    z-index: 401;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;

    &::before {
        display: inline-block;
        border: 10px solid transparent;
        border-right-color: rgba(0, 0, 0, 0.7);
        content: '';
        position: absolute;
        left: -20px;
    }

    .seditor_edit_menu_item {
        line-height: 30px;
        cursor: pointer;
    }
}
